import React from 'react'
import {getEuroShooterRankReq} from "../../../apis/goApis";
import {log} from "../../../utils/commonfunc";
import defaultPlayerSrc from "../../../res/images/web/euro/user pic备份@2x.png"

class Shooter extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            shooter: [],
        }
    }

    componentDidMount() {
        this.getRank()
    }

    getRank = () => {
        getEuroShooterRankReq()
            .then(res => {
                const data = res.data
                log(data)
                if (data.ok) {
                    this.setState({
                        shooter: data.sheshou,
                    })
                }
            })
    }

    render() {
        const defaultShooter = [
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
            {Name: '-', Team: '-', Jinqiu: '-'},
        ]
        let shooter = defaultShooter
        if (this.state.shooter.length > 0) {
            shooter = this.state.shooter
        }
        return (
            <>
                <div className='euro-point-container'>
                    <div className='euro-shooter-table'>
                        <div className='euro-shooter-table-header flex'>
                            <div className='flex-3 flex'>
                                <span className='flex-1' />
                                <span className='flex-5'>
                                    球员
                                </span>
                            </div>
                            <div className='flex-2 flex-space-between-align-center'>
                                <span>
                                    球队
                                </span>
                                <span>
                                    进球
                                </span>
                            </div>
                        </div>


                        <div className='euro-shooter-table-body'>
                            {shooter.map((s, index) => {
                                // Id: 1
                                // Img: "https://img1.dongqiudi.com/fastdfs3/M00/B6/6B/ChOxM1xC8eGAWtm3AAAf7XK1j3Q8818871"
                                // Jinqiu: 2
                                // Name: "卢卡库"
                                // Team: "比利时"
                                // Teamimg: "https://img1.dongqiudi.com/fastdfs3/M00/B5/72/ChOxM1xC2CKAJTG3AAAAypTh1A8948.png"

                                return (
                                    <div className='euro-shooter-table-row flex' key={index}>
                                        <div className='flex-3 flex-align-center'>
                                            <span className='flex-1'>
                                                {index + 1}
                                            </span>
                                            <img src={s.Img ? s.Img : defaultPlayerSrc} alt='' style={{width: 20, height: 20, marginRight: '8px',}}/>
                                            <span className='flex-5'>
                                                {s.Name}
                                            </span>
                                        </div>
                                        <div className='euro-shooter-table-row-right flex-2 flex-space-between-align-center'>
                                            <span>
                                                {s.Team}
                                            </span>
                                            <span>
                                                {s.Jinqiu}
                                            </span>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

export default Shooter